import { withRouter } from "next/router"
import { useState, useEffect } from "react"
import { Radio, Upload, Input, Button, message } from "antd";
import { PlusOutlined } from '@ant-design/icons';
// css
import styles from '@/styles/CommonPersonal.module.scss'
// 组件
import Breadcrumb from '@/components/Breadcrumb'
import Aside from '@/pages_components/personal/Aside'
import Spin from '@/components/Spin'
// api
import { myUploadUrl, myFeedbackType, myFeedbackSubmit } from '@/api/personal'

const Feedback = ({ router }) => {  

    const [loading, setLoading] = useState(false)

    const [feedbacks, setFeedbacks] = useState([])
    const [feedbackType, setFeedbackType] = useState('')
    const [feedbackCnt, setFeedbackCnt] = useState('')

    const [uploadUrl, setUploadUrl] = useState('')
    const [fileList, setFileList] = useState([])

    useEffect(() => {

        const url = myUploadUrl();
        setUploadUrl(url)
    
        myFeedbackType().then(res => {
            const { code, data } = res;
            if(code == 0 && data){
                setFeedbacks([...data])
            }
        })

    }, []);

    // 上传图片
    function uploadFile({ fileList }) {
        setFileList(fileList)
    }

    // 提交反馈意见
    function submitFeedback() {
        if(!feedbackType){
            message.warn('请选择反馈类型')
            return false
        }
        if(feedbackCnt.trim().length < 10){
            message.warn('请填写反馈描述，不少于10个字')
            return false
        }
        const imgs = fileList.map(item => {
            const { response: { data } } = item;
            return data
        })
        let params = {
            businessType: feedbackType,
            content: feedbackCnt,
            picture: imgs.join(",")
        };
        setLoading(true)
        myFeedbackSubmit(params).then(res => {
            let { code } = res;
            if (code == 0) {
                message.success('已提交反馈');
                router.push("/personal");
            }
            setLoading(false);
        })
    }

    // Component  feedbacks
    const FeedbackType = (
        <Radio.Group name="radiogroup" onChange={(e) => { setFeedbackType(e.target.value) }} value={feedbackType}>
            {
                feedbacks.map((item, index) => <Radio value={item.businessType} key={index}>{item.businessName}</Radio>)
            }
        </Radio.Group>
    )
    const FeedbackCnt = (
        <Input.TextArea rows={8} onChange={(e) => setFeedbackCnt(e.target.value) } placeholder="需要简述您的问题描述（至少10个字）" />
    )

    return (
        <div className={styles['personal-page']}>
            {/* loading */}
            <Spin loading={loading} />
            <div className="max-content">
                 {/* 面包屑 */}
                 <Breadcrumb 
                    params={
                        [
                            { name: '个人中心', url: '/personal' },
                            { name: '意见反馈', url: '/personal/feedback' }
                        ]
                    } 
                />
                <div className={styles['wrapper']}>
                    {/* 左侧 */}
                    <Aside />
                     {/* 内容 */}
                     <section className={[styles['content'],styles['feedback-content']].join(' ')}>
                        <div className={styles['max-feedback']}>
                            <div className={styles['form-item']}>
                                <p>反馈类型</p>
                                { FeedbackType }
                            </div>
                            <div className={styles['form-item']}>
                                <p>反馈描述</p>
                                { FeedbackCnt }
                            </div>
                            <div className={styles['form-item']}>
                                <Upload
                                    listType="picture-card"
                                    accept=".png, .jpg, .jpeg"
                                    name="multipartFile"
                                    action={uploadUrl}
                                    multiple={true}
                                    fileList={fileList}
                                    onChange={uploadFile}
                                >
                                    <div>
                                        <PlusOutlined />
                                        <div style={{ marginTop: 8 }}>上传图片</div>
                                        <div>(选填)</div>
                                    </div>
                                </Upload>
                            </div>
                            <div className={styles['form-item']}>
                                <Button type="primary" onClick={() => { submitFeedback() }}>提交反馈</Button>
                            </div>
                        </div>
                     </section>
                </div>
            </div>
        </div>
    )
}

export default withRouter(Feedback)